<template>
	<div class="login-container flex">


		<div class="login-right flex">
			<div class="login-right-warp flex-margin">
				<span class="login-right-warp-one"></span>
				<span class="login-right-warp-two"></span>
				<div class="login-right-warp-mian">
					<div class="login-right-warp-main-title">一卡通后台管理系统</div>
					<div class="login-right-warp-main-form">
						<div>
							<div
								style="display:flex;align-items:center;justify-content:center;font-size:19px;margin-top:10px;">
								欢迎登录
							</div>
							<el-tabs model-value="account">
								<div size="large" style="padding: 3px 1px;margin-top:1.5vh;" class="login-content-form">
									<div class="login-animation1">
										<el-input text placeholder="请输入账号" v-model="userName" clearable
											autocomplete="off">
											<template #prefix>
												<el-icon class="el-input__icon"><ele-User /></el-icon>
											</template>
										</el-input>
									</div>
									<div style="height: 4vh;"></div>
									<div class="login-animation2">
										<el-input placeholder="请输入密码" v-model="password" autocomplete="off"
											show-password>
											<template #prefix>
												<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
											</template>
										</el-input>
									</div>

									<div class="login-animation4">
										<el-button type="primary" @keydown.enter="keyDown()" @click="onSignIn"
											style="width: 100%;margin-top: 50px;border-radios:40px" v-debounce
											:disabled="stas"> 登 录
										</el-button>
									</div>
								</div>
							</el-tabs>
						</div>
					</div>
				</div>
			</div>
		</div>







	</div>
</template>

<script setup name="loginIndex">
import { onMounted, computed, ref, onUnmounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import Cookies from 'js-cookie';
import { useLogin } from '../../stores/login';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { signIn } from '../../api/login/index';
import { formatAxis } from '/@/utils/formatTime';
// 引入组件
const userName = ref('');
const password = ref('');
const store = useLogin();
const stas = ref(false)
const route = useRoute();
const loginTimer = ref(null)
const router = useRouter();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
// 时间获取
const currentTime = computed(() => {
	return formatAxis(new Date());
});
// 回车事件
const myButton = ref(null);
const keyDown = (e) => {
	if (e.keyCode == 13) {
		onSignIn();
	}
};


// 如果已有计时器，则清除它
let loginclickstatus = true;
// 登录点击事件
const onSignIn = () => {
	if (loginclickstatus == true) {
		loginclickstatus = false;
		if (userName.value != '' && password.value != '') {
			signIn({ username: userName.value, password: password.value }).then(async (res) => {
				console.log(res);
				if (res.code == 1) {
					const userinfo = res.data.userinfo;
					Session.set('userinfo', userinfo); // 使用 Session 存储用户信息
					Cookies.set('userName', userinfo.nickname); // 存储用户名到 Cookies
					Session.set('token', res.data.token); // 存储 token
					localStorage.setItem('tokens', JSON.stringify(res.data)); // 存储 tokens
					Cookies.set('userName', res.data.userinfo.nickname);
					Session.set('token', res.data.token);

					localStorage.setItem('tokens', JSON.stringify(res.data));
					// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
					if (res.data) {
						// 前端控制路由，2、请注意执行顺序
						const isNoPower = await initFrontEndControlRoutes();
						signInSuccess(isNoPower);

					} else {
						// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
						// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
						const isNoPower = await initBackEndControlRoutes();
						// 执行完 initBackEndControlRoutes，再执行 signInSuccess
						signInSuccess(isNoPower);
						loginTimer.value = null;
					}
				} else {
					loginclickstatus = true;
					ElMessage.warning(res.msg);
				}
			});
			// 防抖完成，这里可以移除定时器
		} else {
			loginclickstatus = true;
			ElMessage.error('请填写完整');
		}
	}
	// 存储 token 到浏览器缓存
};






// 登录成功后的跳转
const signInSuccess = (isNoPower) => {
	if (isNoPower != '') {
		// 初始化登录成功时间问候语
		let currentTimeInfo = currentTime.value;
		// 登录成功，跳到转首页
		// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
		if (isNoPower) {
			router.push('/home', {
				query: {
					id: 1,
				},
			});
			console.log(123);
		} else {
			stas.value = true
			ElMessage({
				message: '登录成功',
				type: 'success',
				duration: 300
			})
			router.push('/home', {
				query: {
					id: 1,
				},
			});
			return
		}
	} else {
		ElMessage.warning('抱歉，您没有登录权限');
	}
};

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	window.addEventListener('keydown', keyDown);
});

onUnmounted(() => {
	//销毁事件
	window.removeEventListener('keydown', keyDown, false);
});
</script>

<style lang="scss">
.login-container {
	height: 100%;
	width: 100%;
	background-image: url('../../assets/loginBackground.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.el-button--large {
		--el-button-size: 40px;
		border-radius: 30px;
		font-size: var(--el-font-size-base);
		height: var(--el-button-size);
		padding: 12px 19px;
	}

	.login-left {
		flex: 1;
		position: relative;
		background-color: rgba(211, 239, 255, 1);
		// margin-right: 400px;

		.login-left-logo {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50px;
			left: 80px;
			z-index: 1;
			animation: logoAnimation 0.3s ease;

			img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				margin-right: 10px;
			}

			.login-left-logo-text {
				display: flex;
				flex-direction: column;

				span {
					display: flex;
					align-items: center;
					margin-left: 10px;
					font-size: 28px;
					color: #26a59a;
				}

				.login-left-logo-text-msg {
					font-size: 30px;
					color: #fff;
					font-weight: 500;
				}
			}
		}

		.login-left-img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 400px;
			// height: 52%;

			img {
				width: 100%;
				height: 100%;
				animation: error-num 0.6s ease;
			}
		}

		.login-left-waves {
			position: absolute;
			top: 0;
			right: -100px;
		}
	}

	.login-right {
		width: 29%;
		padding-right: 5%;
		margin-left: 13%;

		.login-right-warp {
			// border: 1px solid var(--el-color-primary-light-3);
			// border-radius: 10px;
			width: 400px;
			position: relative;
			overflow: hidden;
			background-color: #fff;
			height: 455px;
			margin-top: 150px;

			.login-right-warp-one,
			.login-right-warp-two {
				position: absolute;
				display: block;
				width: inherit;
				height: inherit;

				&::before,
				&::after {
					content: '';
					position: absolute;
					z-index: 1;
				}
			}

			.login-right-warp-one {
				&::before {
					filter: hue-rotate(0deg);
					top: 0px;
					left: 0;
					width: 100%;
					height: 3px;
					// background: linear-gradient(90deg, transparent, var(--el-color-primary));
					// animation: loginLeft 3s linear infinite;
				}

				&::after {
					filter: hue-rotate(60deg);
					top: -100%;
					right: 2px;
					width: 3px;
					height: 100%;
					background: linear-gradient(180deg, transparent, var(--el-color-primary));
					// animation: loginTop 3s linear infinite;
					animation-delay: 0.7s;
				}
			}

			.login-right-warp-two {
				&::before {
					filter: hue-rotate(120deg);
					bottom: 2px;
					right: -100%;
					width: 100%;
					height: 3px;
					background: linear-gradient(270deg, transparent, var(--el-color-primary));
					// animation: loginRight 3s linear infinite;
					animation-delay: 1.4s;
				}

				&::after {
					filter: hue-rotate(300deg);
					bottom: -100%;
					left: 0px;
					width: 3px;
					height: 100%;
					background: linear-gradient(360deg, transparent, var(--el-color-primary));
					// animation: loginBottom 3s linear infinite;
					// animation-delay: 2.1s;
				}
			}

			.login-right-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;

				.login-right-warp-main-title {
					height: 100px;
					line-height: 100px;
					font-size: 27px;
					text-align: center;
					letter-spacing: 3px;
					// animation: logoAnimation 0.3s ease;
					// animation-delay: 0.3s;
					color: var(--el-text-color-primary);
					font-weight: 600;
					margin-top: 20px;
				}

				.login-right-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;

					.login-content-main-sacn {
						position: absolute;
						top: 0;
						right: 0;
						width: 50px;
						height: 50px;
						overflow: hidden;
						cursor: pointer;
						transition: all ease 0.3s;
						color: var(--el-color-primary);

						&-delta {
							position: absolute;
							width: 35px;
							height: 70px;
							z-index: 2;
							top: 2px;
							right: 21px;
							background: var(--el-color-white);
							transform: rotate(-45deg);
						}

						&:hover {
							opacity: 1;
							transition: all ease 0.3s;
							color: var(--el-color-primary) !important;
						}

						i {
							width: 47px;
							height: 50px;
							display: inline-block;
							font-size: 48px;
							position: absolute;
							right: 1px;
							top: 0px;
						}
					}
				}
			}
		}
	}
}

// .login-content-form .login-animation4 {
// 	margin-top: 4vh !important;
// }

.el-input--large {
	// padding: 3px 6px !important;
	// margin-top: 2vh;
	width: 100% !important;
	height: 35px !important;
}

.login-content-form {
	margin-top: -1vh;

	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;

		&:hover {
			color: #909399;
		}
	}

	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}

	.login-content-submit {
		width: 100%;
		height: 40px;
		background-color: #d3efff;
		outline: hidden;
		border-style: none;

		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
}

.login-right-warp .flex-margin {
	border: 1px solid var(--el-color-primary-light-3);
	border-radius: 10px !important;
	position: relative;
	overflow: hidden;
	background-color: var(--el-color-white);
}
</style>
